<template>
  <div class="dashBoard">
    <el-row :gutter="20">
      <el-col :span="6">
        <div style="height: 200px; background: #123456">内容1</div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px; background: #654321">内容2</div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px; background: #abcdef">内容3</div>
      </el-col>
      <el-col :span="6">
        <div style="height: 200px; background: #fedcba">内容4</div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <div ref="chart" style="height: 400px"></div>
      </el-col>
      <el-col :span="12">
        <div  style="height: 600px">
          <baidu-map class="map" scroll-wheel-zoom center="合肥" :zoom="15">
             <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
             <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
             <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
              <bm-driving
                start="合肥火车站"
                end="合肥南站"
                startCity="合肥"
                endCity="合肥"
                :auto-viewport="true"
                ></bm-driving>
          </baidu-map>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DashBoard',
  data () {
    return {
      chart: null,
      map: null
    }
  },
  methods: {
    initChart () {
      this.chart = this.$echarts.init(this.$refs.chart)
      // 设置图标配置
      const option = {
        title: {
          text: 'xxx标题'
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        color: ['#dc5678', '#ffac22'],
        backgroundColor: '#a4f000',
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            smooth: true,
            type: 'line',
            data: [15, 8, 29, 40, 38, 2]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(option)
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 100%;
}
</style>
